<template>
  <div>
    <!-- 使用数据方式1 - 通过 $store.state 获取 -->
    <div>count={{ $store.state.count }}</div>
    <!-- 使用数据方式2 - 通过计算属性简化插值表达式 -->
    <div>count={{ countI }}</div>
    <!-- 使用数据方式3 - 把数据映射 mapState 到计算属性中 -->
    <div>count={{ count }}; age={{ age }}</div>

    <!-- 调用mutations方式1 - 通过 $store.commit 获取 -->
    <button @click="$store.commit('add')">count: {{ count }}</button>
    <!-- 调用mutations方式2 - 通过映射mapMutations -->
    <button @click="add">count: {{ count }}</button>

    <!-- 调用mutations传参 -->
    <button @click="$store.commit('addN', 5)">count+N: {{ count }}</button>
    <button @click="addN(5)">count+N: {{ count }}</button>

    <!-- 调用actions方式1 - 通过 $store.dispatch 获取 -->
    <button @click="$store.dispatch('addSync')">count async: {{ count }}</button>
    <!-- 调用actions方式2 - 通过映射mapActions -->
    <button @click="addSync">count async: {{ count }}</button>

    <!-- 调用actions传参 -->
    <button @click="$store.dispatch('addSyncN', 3)">count async+N: {{ count }}</button>
    <button @click="addSyncN(3)">count async+N: {{ count }}</button>

    <!-- 调用getters, 方式1 - 通过 $store.getters 获取 -->
    <div>{{ $store.getters.showCount }}</div>
    <!-- 调用getters, 方式2 - 通过映射mapGetters -->
    <div>{{ showCount }}</div>

    <!-- 使用模块中的数据: $store.state.模块名.数据名 -->
    <div>token: {{ $store.state.test.token }}</div>
    <!-- 方法默认不用加模块名, 但是会有问题 => 默认会调到vuex中所有没有加namespaced属性的模块的setToken方法  -->
    <!-- <button @click="$store.commit('setToken', 'Bare abcd')">setToken: {{ $store.state.test.token }}</button> -->
    <!-- 默认不支持模块名调用方法, 需要加namespaced:true属性配置 -->
    <button @click="$store.commit('test/setToken', 'Bare abcd')">setToken: {{ $store.state.test.token }}</button>

    <svg-icon icon-class="eye" class-name="color-red">
    </svg-icon></div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: '',
  data() {
    return {

    }
  },
  computed: {
    ...mapState(['count', 'age']),
    ...mapGetters(['showCount']),
    'countI'() {
      return this.$store.state.count
    }
  },
  methods: {
    ...mapMutations(['add', 'addN']),
    ...mapActions(['addSync', 'addSyncN'])
  }
}
</script>

<style lang="scss" scoped>
.color-red {
  color: red;
}
</style>
